<template>
  <div
    class="self-dept-cascader"
    :style="{ width: width !== '' ? width : 'auto' }"
  >
    <!-- 部门展示 -->
    <el-tooltip
      class="item"
      effect="dark"
      :content="formData.appName ? formData.appName  : '请选择'"
      placement="top"
    >
      <div @click="visible = true">
        <el-input
          :class="{ disabled: disable }"
          v-model="formData.appName"
          :style="{ width: width !== '' ? width : 'auto' }"
          readonly
          :placeholder="placeholder"
        />
        <svg-icon class-name="edit-svg" icon-class="edit" />
      </div>
    </el-tooltip>
    <!-- 部门选择工具 -->
    <Select v-model:visible="visible" v-model="formData" />
  </div>
</template>

<script>
import { ref, computed, watch, defineComponent } from "vue";
import Select from "./Select.vue";
export default defineComponent({
  name: "AppFormSelect",
  emits: ["update:form"],
  components: {
    Select,
  },
  props: {
    modelValue: {
      type: Object,
      default: () => {}
    },
    placeholder: {
      type: String,
      default: "筛选应用",
    },
    width: {
      type: String,
      default: "",
    },
    disable: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit, slots }) {
    const visible = ref(false);
    const formData = computed({
      get: () => props.modelValue,
      set: (val) => emit("update:modelValue", val),
    });
    return {
      formData,
      visible,
    }
  }
})
</script>

<style scoped lang="scss">
.cascader-container {
  display: inline-block;
}
.el-cascader-panel {
  height: 300px;
}
.el-radio-group {
  width: 100%;
}
.self-dept-cascader {
  display: inline-block;
  // margin-right: 10px;
  position: relative;
  .el-input {
    width: 200px;
    cursor: pointer;
    :deep(.el-input__inner){
      padding-right: 40px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
    &.disabled {
      cursor: not-allowed;
      :deep(.el-input__inner) {
        color: #666;
        cursor: not-allowed;
      }
    }
  }
  .edit-svg {
    position: absolute;
    top: 9px;
    right: 10px;
    color: #ccc;
    width: 16px;
    height: 16px;
  }
}
</style>
